import React, {useMemo} from 'react';
import {Button, Space, Table, Tabs, Modal} from 'antd';
import CourseList from '../../component/courseList';
import useExchangeModel from './exchange_model';

const {TabPane} = Tabs;

const Course = () => {

  const exchangeModel = useExchangeModel();

  const columns_base = useMemo(() => [
    {
      title: '课程',
      dataIndex: 'lesson_title',
      width: 200,
    },
    {
      title: '课程类型',
      dataIndex: 'lesson_type',
      width: 100,
      // render: text => global.effect.getCheckInTypeById(text)
      // filters: CheckInModel.state.schoolList
      //   .map(id => ({text: Global.effect.getSchoolById(id)?.name, value: id})),
      // onFilter: (value, record) => record.school_id === value,
    },
    {
      title: '申请学校',
      dataIndex: 'school_text',
      width: 100,
    },
    {
      title: '申请人',
      dataIndex: 'user_text',
      width: 100,
    }
  ], []);

  const columns_checked = useMemo(() => [
    ...columns_base,
    {
      title: '消耗积分',
      dataIndex: 'score',
      width: 100,
    }
  ], []);

  const columns_unChecked = useMemo(() => [
    ...columns_checked,
    {
      title: '操作',
      width: 200,
      render: (text, record) =>
        <Space size="middle">
          <Button type="primary" onClick={() => {
            Modal.confirm({
              title: '确认通过审核',
              content: '请确认是否通过审核，通过审核后，即使改变课程积分，该学校所扣除积分也按本次审核扣除为准',
              onOk: () => exchangeModel.effect.resolve(record)
            });
          }}>通过</Button>
          <Button danger onClick={() => {
            Modal.confirm({
              title: '确认驳回请求',
              content: '请确认是否驳回请求，驳回后不会扣除该学校积分',
              onOk: () => exchangeModel.effect.reject(record)
            });
          }}>驳回</Button>
        </Space>
    }
  ], []);

  return (
    <div className={'checkin-list'}>
      <Tabs defaultActiveKey="1">
        <TabPane tab="全部课程" key="1">
          <CourseList/>
        </TabPane>
        <TabPane tab="待审核兑换" key="2">
          <Table
            columns={columns_unChecked}
            dataSource={exchangeModel.state.list.filter(item => item.status === 2)}
          />
        </TabPane>
        <TabPane tab="已审核兑换" key="3">
          <Table
            columns={columns_checked}
            dataSource={exchangeModel.state.list.filter(item => item.status === 1)}
          />
        </TabPane>
        <TabPane tab="已驳回兑换" key="4">
          <Table
            columns={columns_base}
            dataSource={exchangeModel.state.list.filter(item => item.status === 0)}
          />
        </TabPane>
      </Tabs>
    </div>
  );
};

export default Course;